
<template>
  <div>
    <span 
    v-if="selected != 2"
    class="formatSelectItem" 
    :class="{'active': currentFormatId === format.productFormatId }"
    @click="_changeCurrentFormatColor(format.productFormatId,format.sellPrice)"  >
        {{format.name}}
    </span>

    <span 
    v-if="selected == 2 && integralBoolean == false"
    class="formatSelectItem" 
    :class="{'active': currentFormatId === format.productFormatId }"
    @click="_changeCurrentFormatColor(format.productFormatId,format.showPrice)"  >
        {{format.name}}
    </span>

    <span 
    v-if="selected == 2 && integralBoolean == true"
    class="formatSelectItem" 
    :class="{'active': currentFormatId === format.productFormatId }"
    @click="_changeCurrentFormatColor(format.productFormatId,format.sellPrice)"  >
        {{format.name}}
    </span>
  </div>
   

</template>
<script>
  export default {
    props: {
      format: {
        type: Array
      },
      currentFormatId: {
        type: Number
      },
      selected:{
        type:String
      },
      integralBoolean:{
        type:String
      }
    },
    methods: {
      _changeCurrentFormatColor (id,price) {
        if (this.currentFormatId !== this.format.productFormatId) {
          this.$store.dispatch('changeCurrnetFormatId', this.format.productFormatId)
        }
      }
    }
  }
</script>

<style scoped>
.formatSelectItem{
  display: inline-block;
  font-size: 24rpx;
  color: #000000;
  padding: 15rpx 25rpx;
  margin: 0 10rpx 10rpx 0;
  background: #efeff4;
}
.active{
  background: #e1c7d2; 
  color: #fff;
}
</style>
